<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org"
      xmlns="http://www.w3.org/1999/xhtml" layout:decorate="~{layout/template}">
<head>
    <title>编辑</title>
    <link rel="stylesheet" href="/css/process/definition/add.css"/>
</head>
<body>
<div id="contentContainer" layout:fragment="content" class="contentContainer navItem" v-cloak>

    <el-row>
        <el-col :span="12" :offset="6">
            <el-form :model="form" :rules="rules" ref="form" label-width="120px">
                <el-form-item label="流程名称" prop="processDefinitionName">
                    <el-input v-model="form.processDefinitionName"></el-input>
                </el-form-item>
                <el-form-item label="流程分类" prop="processCategoryId">
                    <el-select v-model="form.processCategoryId" clearable
                               placeholder="流程分类">
                        <el-option
                                v-for="item in processCategoryList"
                                :key="item.processCategoryId"
                                :label="item.processCategoryName"
                                :value="item.processCategoryId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="流程节点数" prop="processNodes">
                    <el-input-number v-model="form.processNodes"
                                     :controls="true"
                                     :min="0"
                                     :max="maxTaskNodeCount"
                                     @change="onProcessNodeCountChange">
                    </el-input-number>
                </el-form-item>
                <template v-for="(taskNode, index) in form.taskNodes">
                    <el-form-item :label="'流程节点'+(index+1)"
                                  :key="'taskName'+index"
                                  :prop="'taskNodes.' + index + '.taskName'"
                                  :rules="rules.taskName">
                        <el-input v-model="taskNode.taskName"
                                  placeholder="请输入节点名称">
                        </el-input>
                    </el-form-item>
                    <el-form-item :key="'candidate'+index"
                                  :prop="'taskNodes.' + index + '.candidate'"
                                  :rules="rules.candidate">
                        <el-select v-model="taskNode.candidate"
                                   placeholder="请输入候选人用户名或姓名"
                                   multiple
                                   filterable
                                   remote
                                   :remote-method="onSearchUser"
                                   :loading="searching"
                                   @change="onCandidateChange"
                                   @visible-change="onCandidateChange">
                            <el-option
                                    v-for="item in userList"
                                    :key="item.userId"
                                    :label="item.realName"
                                    :value="item.userId">
                                <span class="candidate-label">{{ item.realName }}</span>
                                <span class="candidate-value">{{ item.userName }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </template>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                    <el-button @click="resetForm('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>

</div>

<th:block layout:fragment="staticFile">
    <script src="/js/process/definition/edit.js"></script>
</th:block>

</body>
</html>